<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }

        body {
            padding: 20px;
            background: #fff;
        }

        .container {
            /* max-width: 1200px; */
            width: 100%;
            margin: 0 auto;
        }

        .info-banner {
            background-color: #f0f7ff;
            border: 1px solid #e1eeff;
            border-radius: 4px;
            padding: 12px;
            margin-bottom: 20px;
            color: #333;
            display: flex;
            align-items: flex-start;
            gap: 8px;
            line-height: 1.5;
        }

        .info-icon {
            width: 16px;
            height: 16px;
            background-color: #1a73e8;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 10px;
        }

        .coordinates-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .coordinate-input {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .coordinate-input input {
            width: 60px;
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .text-input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            color: #999;
        }

        .button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background: #1a73e8;
            color: white;
            cursor: pointer;
            font-size: 14px;
        }

        .button-secondary {
            background: #f5f5f5;
            color: #666;
        }

        .history-section {
            margin: 20px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #666;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }

        .table th {
            background: #f5f5f5;
            text-align: left;
            padding: 12px;
            font-weight: normal;
            color: #666;
            font-size: 14px;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #999;
        }

        .empty-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
            background-color: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="info-banner">
            <div class="info-icon">i</div>
            <div>
                功能说明：<br>
                视频去字幕需要在云端处理，平均每30秒视频需要5分钟，支持提交多个任务，批量处理！每30秒视频消耗4点点数，不足30秒按30秒计算。任务处理完成会自动下载，历史记录保存7天，请及时下载。目前支持视频时长5分钟以内。
            </div>
        </div>

        <div class="input-group">
            <span>选择视频文件:</span>
            <input type="text" class="text-input" placeholder="请选择视频文件">
            <span>时长: 0秒</span>
        </div>

        <div class="input-group">
            <div class="coordinates-group">
                <div class="coordinate-input">
                    <span>X:</span>
                    <input type="text" value="0">
                </div>
                <div class="coordinate-input">
                    <span>Y:</span>
                    <input type="text" value="0">
                </div>
                <div class="coordinate-input">
                    <span>宽:</span>
                    <input type="text" value="0">
                </div>
                <div class="coordinate-input">
                    <span>高:</span>
                    <input type="text" value="0">
                </div>
            </div>
            <button class="button">选取位置</button>
        </div>

        <div class="input-group">
            <span>选择保存目录:</span>
            <input type="text" class="text-input" placeholder="请选择保存目录">
            <button class="button">打开</button>
        </div>

        <div class="input-group">
            <button class="button button-secondary">去除字幕</button>
            <button class="button button-secondary">取消任务</button>
        </div>

        <div class="history-section">
            <span>历史记录:</span>
            <span>查询最近2天的记录(昨天00:00 - 今天23:59)</span>
            <button class="button">获取历史记录</button>
        </div>

        <table class="table">
            <thead>
                <tr>
                    <th>任务ID</th>
                    <th>文件名</th>
                    <th>时长</th>
                    <th>创建时间</th>
                    <th>状态</th>
                    <th>是否下载</th>
                    <th>操作</th>
                </tr>
            </thead>
        </table>

        <div class="empty-state">
            <div class="empty-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="#999">
                    <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"/>
                </svg>
            </div>
            暂无数据
        </div>
    </div>
</body>
</html> 